<!DOCTYPE html>
<html>
<head>
	<title>采购员</title>
	<link href="./css/libs/sweetalert.min.css" rel="stylesheet">
	<link href="./css/libs/element.min.css" rel="stylesheet">
	<script src="./js/libs/sweetalert.min.js"></script>
	<script src="./js/libs/jquery.min.js"></script>
	<script src="./js/libs/vue.min.js"></script>
	<script src="./js/libs/element.min.js"></script>
	<script src="./js/libs/echarts.min.js"></script>
	<style type="text/css">
		html,body{
			margin: 0;
			padding: 0;
			height: 100%;
		}
		.el-header {
			background-color: #B3C0D1;
			color: #333;
			line-height: 60px;
		}

		.el-aside {
			color: #333;
		}
		.cube-title{
			margin-top: 0px;
			color: #666;
		}
		[v-cloak] {
		display: none;
		} 
	</style>
</head>

<body>
	<div id="app" v-cloak style="height: 100%">
		<el-container style="height: 100%">
			<el-header style="text-align: right;">
				<h4 style="float: left;margin:0px;color: #333;">药品进销存-采购平台</h4>
				<el-dropdown style="cursor: pointer;" @command="logout">
					<span>{{userMsg.name || userMsg.account}}</span>
					<i class="el-icon-setting" style="margin-right: 15px"></i>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item command="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-header>
			<el-container>
				<el-aside width="200px">
					<el-menu style="height: 100%">
						<el-submenu index="1">
							<template slot="title">药品管理</template>
							<el-menu-item index="1-1" v-on:click="changeCube('medicine-view')">药品进货</el-menu-item>
							<el-menu-item index="1-2" v-on:click="changeCube('medicine-add')">新增药品</el-menu-item>
						</el-submenu>
						<el-submenu index="2">
							<template slot="title">账单查看</template>
							<el-menu-item index="2-1" v-on:click="changeCube('bill-view-purchase')">我的账单</el-menu-item>
						</el-submenu>
						<el-submenu index="3">
							<template slot="title">个人信息</template>
							<el-menu-item index="3-1" v-on:click="changeCube('personal-messsage')">信息查看</el-menu-item>
						</el-submenu>
					</el-menu>
				</el-aside>
				<el-container>
					<el-main>
						<!-- 药品查看和管理 -->
						<div class="cube" v-if="showCube == 'medicine-view'">
							<h5 class="cube-title">药品管理 / 药品进货</h5>
							<el-table :data="showMedicineAble">
								<el-table-column prop="name" label="药名" width="180">
								</el-table-column>
								<el-table-column prop="amout" label="库存" width="140">
								</el-table-column>
								<el-table-column label="到期时间" :formatter="caleAbletime" width="120">
								</el-table-column>
								<el-table-column prop="code" label="药品编号" width="160">
								</el-table-column>
								<el-table-column label="操作">
									<template slot-scope="scope">
										<el-button
										size="mini"
										type="primary"
										@click="showBuyMedicine(scope.$index, scope.row)">进货</el-button>
										<el-button
										size="mini"
										type="success"
										@click="showMedicineDetail(scope.$index, scope.row)">详情</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<!-- 新增药品 -->
						<div class="cube" v-show="showCube == 'medicine-add'">
							<h5 class="cube-title">药品管理 / 新增药品</h5>
							<div style="width: 600px;">
								<el-form ref="medicineAdd" :model="medicineAdd" label-width="80px">
									<el-form-item label="药品图片">
										<img style="width: 	250px;height: 250px;" v-if="medicineAdd.imgurl != ''" :src="medicineAdd.imgurl">
										<form id="uploadForm"><input id="inputFile" type="file" name="imgfile"></form>
									</el-form-item>
									<el-form-item label="药品名称">
										<el-input v-model="medicineAdd.name"></el-input>
									</el-form-item>
									<el-form-item label="药品价格">
										<el-input v-model="medicineAdd.price"></el-input>
									</el-form-item>
									<el-form-item label="药品类型">
										<el-select v-model="medicineAdd.type" placeholder="请选择药品分类">
											<el-option label="感冒用药类" value="cold"></el-option>
											<el-option label="止咳用药类" value="cough"></el-option>
											<el-option label="皮肤科用药类" value="skin"></el-option>
											<el-option label="眼科用药类" value="eyes"></el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="生产时间">
										<el-date-picker type="date" placeholder="选择日期" v-model="medicineAdd.producetimetemp" style="width: 100%;"></el-date-picker>
									</el-form-item>
									<el-form-item label="有效期长">
										<el-input v-model="medicineAdd.abletime" type="number" placeholder="以月为单位"></el-input>
									</el-form-item>
									<el-form-item label="药品编码">
										<el-input v-model="medicineAdd.code"></el-input>
									</el-form-item>
									<el-form-item label="生产公司">
										<el-input v-model="medicineAdd.company"></el-input>
									</el-form-item>
									<el-form-item label="生产地址">
										<el-input v-model="medicineAdd.address"></el-input>
									</el-form-item>
									<el-form-item label="电话号码">
										<el-input v-model="medicineAdd.phone"></el-input>
									</el-form-item>
									<el-form-item label="药品详情">
										<el-input type="textarea" v-model="medicineAdd.introduce"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="addMedicine">立即创建</el-button>
										<el-button>取消</el-button>
									</el-form-item>
								</el-form>
							</div>
						</div>
						<!-- 销售账单 -->
						<div class="cube" v-if="showCube == 'bill-view-purchase'">
							<h5 class="cube-title">账单查看 / 我的账单</h5>
							<el-table :data="showPurchaseBill">
								<el-table-column prop="medicine_name" label="采购药品" width="180">
								</el-table-column>
								<el-table-column prop="clerk_name" label="采购人员" width="120">
								</el-table-column>
								<el-table-column prop="amout" label="采购数量" width="140">
								</el-table-column>
								<el-table-column :formatter="timeParse" label="采购时间">
								</el-table-column>
							</el-table>
						</div>
						<div class="cube" v-if="showCube == 'personal-messsage'">
							<h5 class="cube-title">个人信息 / 信息查看</h5>
							<el-card class="box-card" style="font-size: 14px;color:#333;width: 400px;padding-bottom: 50px;line-height: 2">
								<p>我的名称：{{userMsg.name}}</p>
								<p>我的账号：{{userMsg.account}}</p>
								<p>我的角色：销售人员</p>
								<el-button size="mini" type="success" @click="showChangePassword">修改登录密码</el-button>
							</el-card>
						</div>
					</el-main>
				</el-container>
			</el-container>
		</el-container>

		<!-- 以下为弹出框内容 -->

		<!-- 药品详情弹出框 -->
		<el-dialog
			:title="medicineDetail.name + '详情'"
			:visible.sync="dialog.medicineDetail"
			width="1000px">
			<div style="width: 300px;height: 200px;overflow: hidden;display: inline-block;vertical-align: top;">
				<img style="width: 300px;" :src="medicineDetail.imgurl">
			</div>
			<div style="width: 600px;display: inline-block;vertical-align: top;">
				<p>药品名称：{{medicineDetail.name}}</p>
				<p>药品价格：{{medicineDetail.price}}</p>
				<p>库存数量：{{medicineDetail.amout}}</p>
				<p>详细介绍：{{medicineDetail.introduce}}</p>
				<p>生产时间：{{new Date(medicineDetail.producetime*1000).toLocaleDateString()}}</p>
				<p>有效期长：{{medicineDetail.abletime}}个月</p>
				<p>到期时间：{{new Date((medicineDetail.producetime+(medicineDetail.abletime*30*24*3600))*1000).toLocaleDateString()}}</p>
				<p>生产公司：{{medicineDetail.company}}</p>
				<p>生产地址：{{medicineDetail.address}}</p>
				<p>公司电话：{{medicineDetail.phone}}</p>
				<p>药品编号：{{medicineDetail.code}}</p>
			</div>
		</el-dialog>


		<!-- 销售药品弹出框 -->
		<el-dialog
			:title="'采购' + medicineMsgSelected.name"
			:visible.sync="dialog.medicineBuy"
			width="600px">
			<el-form ref="medicineBuyMsg" :model="medicineBuyMsg" label-width="80px">
				<el-form-item label="采购数量">
    				<el-input v-model="medicineBuyMsg.amout" type="number"></el-input>
  				</el-form-item>
<!-- 				<el-form-item label="销售信息">
    				<el-input v-model="medicineBuyMsg.message" placeholder="可不填"></el-input>
  				</el-form-item> -->
				<el-form-item label="采购备注">
    				<el-input v-model="medicineBuyMsg.remark" placeholder="可不填"></el-input>
  				</el-form-item>
  				<el-form-item label="操作时间">
				    <el-date-picker
				      v-model="medicineBuyMsg.create_time"
				      type="datetime"
				      placeholder="选择日期时间">
				    </el-date-picker>
  				</el-form-item>
  				<el-form-item>
    				<el-button type="primary" @click="buyMedicine">立即创建</el-button>
  				</el-form-item>
			</el-form>
		</el-dialog>

		<!-- 修改密码 -->
		<el-dialog
			title="更改密码"
			:visible.sync="dialog.changePassword"
			width="600px">
			<el-form ref="password" :model="password" label-width="120px">
				<el-form-item label="输入原始密码">
    				<el-input v-model="password.oldPassword" type="password"></el-input>
  				</el-form-item>
				<el-form-item label="输入新密码">
    				<el-input v-model="password.newPassword1" type="password"></el-input>
  				</el-form-item>
				<el-form-item label="再次输入新密码">
    				<el-input v-model="password.newPassword2" type="password"></el-input>
  				</el-form-item>
  				<el-form-item>
    				<el-button type="primary" @click="changePassword">立即修改</el-button>
  				</el-form-item>
			</el-form>
		</el-dialog>


	</div>
	<script src="./js/buyer.js"></script>
</body>
</html>